import React from 'react';
import { Modal, Table, Input, Button } from 'antd';
import request from '@/utils/request';

const { Search } = Input;
class ItemSelect extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      dataSource: [],
    };
  }
  componentDidMount() {}
  fetchDatas = () => {
    const { pageIndex, keywords, pageSize } = this.state;
    const { params } = this.props;
    this.setState({ loading: true });
    const apiURL = '/api/services/app/' + this.props.control + '/' + this.props.act;
    request(apiURL, {
      method: 'GET',
      params: {
        SkipCount: (pageIndex - 1) * pageSize,
        MaxResultCount: pageSize,
        keywords,
        ...params,
      },
    }).then((response) => {
      const resp = response.result;
      if (resp) {
        this.setState({
          dataSource: resp.items,
          totalCount: resp.totalCount,
          loading: false,
        });
      }
    });
  };
  setCurrent = (obj?: any) => {
    if (this.props.setCurrent) {
      this.props.setCurrent(obj);
    }
    this.switchModal();
  };
  onSearch = (keywords: string) => {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const _this = this;
    this.setState({ keywords }, function () {
      _this.fetchDatas();
    });
  };
  switchModal = () => {
    const { visible } = this.state;
    if (!visible) {
      this.fetchDatas();
    }
    this.setState({ visible: !visible });
  };
  render() {
    const { loading, dataSource, totalCount, pageSize, visible } = this.state;

    return (
      <>
        <Button
          type={this.props.btntype}
          danger={this.props.danger}
          icon={this.props.icon}
          disabled={this.props.disabled}
          onClick={this.switchModal}
        >
          {this.props.text}
        </Button>
        <Modal
          width={this.props.width}
          title={this.props.title}
          visible={visible}
          destroyOnClose={true}
          onCancel={this.switchModal}
          footer={false}
        >
          <Table
            title={() => (
              <Search placeholder="关键词搜索" allowClear enterButton onSearch={this.onSearch} />
            )}
            onRow={(record) => {
              return {
                onClick: () => {},
                onDoubleClick: () => {
                  this.setCurrent(record);
                },
              };
            }}
            pagination={{
              onChange: (page) => {
                this.setState({ pageIndex: page }, () => {
                  this.fetchDatas();
                });
              },
              pageSize,
              total: totalCount,
            }}
            rowKey="id"
            size="small"
            columns={this.props.columns}
            dataSource={dataSource}
            loading={loading}
          />
        </Modal>
      </>
    );
  }
}
export default ItemSelect;
